<template>
	<view class="container-waterfall">
		<view class="waterfall_left">
			<view @click="onItem(item)" class="waterfall_item" v-for="(item,index) in listLeft" :key="item.id">
				<view class="item_img">
					<image v-if="isHide && item.hide == 0" class="hide-img" src="@/static/hide.png"></image>
					<!-- <image :src="item.url" mode="widthFix" @load="considerPush"></image> -->
					<template v-if="item.url">
						<zero-lazy-load :image="item.url" :imgMode='imgMode' @load='considerPush' @error='considerPush'>
						</zero-lazy-load>
					</template>
					<zero-lazy-load v-else image="@/static/play.png" :imgMode='imgMode' @load='considerPush'
						@error='considerPush'>
					</zero-lazy-load>

					<view class="mask" v-if="isMask && item.status != 1">
						<view class="text">{{['审核中','','发布失败'][item.status]}}</view>
					</view>
					<view @click.stop="videoPlay(item)" class="video" v-if="item.video">
						<image style="width: 100%;height: 100%;" src="@/static/play.png" mode=""></image>
					</view>
				</view>
				<view class="item_info">
					<!-- 	<view class="item_info_title">{{item.title}}</view>
					<view class="item_info_note">{{item.note}}</view> -->
					<!--  #ifdef  MP-WEIXIN -->
					<!-- #ifdef VUE2 -->
					<slot name="slot{{item.id}}"></slot>
					<!-- #endif -->
					<!-- #ifdef VUE3 -->
					<slot :name="`slot${item.id}`"></slot>
					<!-- #endif -->
					<!--  #endif -->

					<!-- #ifndef  MP-WEIXIN -->
					<slot v-bind="item" />
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="waterfall_right">
			<view @click="onItem(item)" class="waterfall_item" v-for="(item,index) in listRight" :key="item.id">
				<view class="item_img">
					<image v-if="isHide &&item.hide == 0" class="hide-img" src="@/static/hide.png"></image>
					<!-- <image :src="item.url" mode="widthFix" @load="considerPush"></image> -->
					<template v-if="item.url">
						<zero-lazy-load :image="item.url" :imgMode='imgMode' @load='considerPush' @error='considerPush'>
						</zero-lazy-load>
					</template>
					<zero-lazy-load v-else image="@/static/play.png" :imgMode='imgMode' @load='considerPush'
						@error='considerPush'>
					</zero-lazy-load>
					<view class="mask" v-if="isMask && item.status != 1">
						<view class="text">{{['审核中','','发布失败'][item.status]}}</view>
					</view>
					<view @click.stop="videoPlay(item)" class="video" v-if="item.video">
						<image style="width: 100%;height: 100%;" src="@/static/play.png" mode=""></image>
					</view>
				</view>
				<view class="item_info">
					<!-- <view class="item_info_title">{{item.title}}</view>
					<view class="item_info_note">{{item.note}}</view> -->
					<!--  #ifdef  MP-WEIXIN -->
					<!-- #ifdef VUE2 -->
					<slot name="slot{{item.id}}"></slot>
					<!-- #endif -->
					<!-- #ifdef VUE3 -->
					<slot :name="`slot${item.id}`"></slot>
					<!-- #endif -->
					<!--  #endif -->

					<!-- #ifndef  MP-WEIXIN -->
					<slot v-bind="item" />
					<!-- #endif -->
				</view>
			</view>
		</view>
		<!-- <view class="video-box" v-if="videoSrc"
			style="position: fixed;top:0;left: 0;width: 100%;height: 100%;z-index: 999;">
			<view @click="videoSrc = ''" style="color:#fff;position: fixed;top:20rpx;right: 20rpx;z-index: 10000;">关闭</view>
			<video id="myVideo" :src="videoSrc" controls :poster="poster" style="width: 100%;height: 100%;"></video>
		</view> -->

	</view>

</template>
<script>
	export default {
		name: "zero-waterfall",
		props: {
			isHide:{
				type: Boolean,
				default: true
			},
			isMask: {
				type: Boolean,
				default: true
			},
			// 需要在使用页面 onPageScroll 传进来
			list: {
				type: Array,
				required: true,
				default: []
			},
			// 图片裁剪模式
			imgMode: {
				type: String,
				default: 'widthFix'
			},
		},
		data() {
			return {
				listLeft: [],
				listRight: [],
				newList: [],
				poster: '',
				videoSrc: ''
			}
		},
		watch: {
			list: {
				handler: function(newValue, oldValue) {
					this.newList = newValue.slice(oldValue.length);
					
					this.considerPush()
				},
				deep: true
			}
		},
		mounted() {
			this.init()
		},

		methods: {
			videoPlay(item) {
				uni.navigateTo({
					url: '/pages/video/video?url=' + decodeURI(item.video)
				})
			},
			onItem(item) {
				this.$emit('onItem', item)
			},
			// 触发重新排列
			init() {
			
				this.newList = [...this.list];
				this.listLeft = [];
				this.listRight = [];
				if (this.newList.length != 0) {
					this.listLeft.push(this.newList.shift()); //触发排列
					// this.listRight.push(this.newList[1]); //触发排列
				}
				
			},
			// 清空数据列表
			clear() {
				this.listLeft = [];
				this.listRight = [];
				// 同时清除父组件列表中的数据
				this.$emit('clear', []);
				this.newList = [];
			},
			async considerPush() {
				if (this.newList.length == 0) return; //没有数据了
				let leftH = 0,
					rightH = 0; //左右高度
				var query = uni.createSelectorQuery().in(this);

				query.selectAll('.waterfall_left').boundingClientRect()
				query.selectAll('.waterfall_right').boundingClientRect()

				// 等待 exec 完成
				let res = await new Promise((resolve) => {
					query.exec(resolve);
				});

				leftH = res[0].length != 0 ? res[0][0].height : 0; //防止查询不到做个处理
				rightH = res[1].length != 0 ? res[1][0].height : 0;

				if (leftH == rightH || leftH < rightH) {
					// 相等 || 左边小  
					this.listLeft.push(this.newList.shift());
				} else {
					// 右边小
					this.listRight.push(this.newList.shift());
				}
			},
			// 计算排列
			// considerPush() {
			// 	if (this.newList.length == 0) return; //没有数据了
			// 	let leftH = 0,
			// 		rightH = 0; //左右高度
			// 	var query = uni.createSelectorQuery().in(this);

			// 	query.selectAll('.waterfall_left').boundingClientRect()
			// 	query.selectAll('.waterfall_right').boundingClientRect()
			// 	query.exec(res => {
			// 		// console.log('结果',res)
			// 		leftH = res[0].length != 0 ? res[0][0].height : 0; //防止查询不到做个处理
			// 		rightH = res[1].length != 0 ? res[1][0].height : 0;
			// 		// console.log('结果',leftH,rightH)
			// 		if (leftH == rightH || leftH < rightH) {
			// 			// 相等 || 左边小  
			// 			this.listLeft.push(this.newList.shift());
			// 		} else {
			// 			// 右边小
			// 			this.listRight.push(this.newList.shift());
			// 		}
			// 	});
			// },

		}

	}
</script>
<style lang="scss" scoped>
	.container-waterfall {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		align-items: flex-start;
	}

	.waterfall_left,
	.waterfall_right {
		width: 46%;
	}

	.waterfall_item {
		width: 100%;
		margin: 10rpx 0 34rpx 0;
		background-color: #FFFFFF;
		position: relative;
		// border-radius: 15rpx;
		// overflow: hidden;

		.item_img {
			width: 100%;
			overflow: hidden;
			border-radius: 14px;
			position: relative;
			background-color: #F1F1F1;
			max-height: 420rpx;
				
			.hide-img {
				position: absolute;
				width: 50rpx;
				height: 50rpx;
				top: 16rpx;
				left: 16rpx;
				z-index: 9;
			}
			.mask {
				position: absolute;
				top: 0;
				width: 100%;
				left: 0;
				height: 100%;
				background: rgba(0, 0, 0, 0.60);
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 2;

				.text {
					color: #FFF;
					text-align: center;
					font-family: "PingFang SC";
					font-size: 16px;
					font-weight: 400;
				}
			}

			.video {
				position: absolute;
				z-index: 1;
				right: 0;
				top: 0;
				width: 80rpx;
				height: 80rpx;
				padding: 20rpx;
			}

			image {
				width: 100%;
				overflow: hidden;
			}
		}

		.item_info {
			// padding: 10rpx 0;
			background-color: #fff;

			.item_info_title {
				color: #333333;
				font-size: 32rpx;
				padding: 10rpx 0;
			}

			.item_info_note {
				color: #666666;
				font-size: 28rpx;
			}
		}

	}
</style>